<template>
	<view
	  v-if="data.display"
	  :class="`the-popup ${data.active ? 'the-popup-active' : 'the-popup-hide'}`"
	>
	  <!-- 点击外部返回 -->
	  <view class="the-popup-overlay" @tap.stop.prevent="closePopup" />
	
	  <!-- 弹出内容 -->
	  <view class="the-popup-container">
	    <slot :popupData="data.popupData"></slot>
	  </view>
	</view>
</template>

<script>
	export default {
		name:"ThePopupFrame",
		data() {
			return {
				data:{
					display: false,
					
					active: false,
					
					popupData: {}
				}
			};
		},
		
		created() {
			this.onEvent()
		},
		//被 keep-alive 缓存的组件激活时调用。
		activated() {
			this.onEvent()
		},
		beforeDestroy() {
			this.closeEvent()
		},
		
		methods:{
			//初始化数据
			onEvent() {
			  uni.$on('popupOpen', (eventData) => {
			    this.data.popupData = eventData
			    if (this.data.display) return
			    this.data.display = true
			    this.$nextTick(() => setTimeout(() => (this.data.active = true), 10))
			  })
			
			  uni.$on('popupClose', () => {
			    this.close()
			  })
			},
			
			closeEvent() {
			  uni.$off('popupOpen')
			  uni.$off('popupClose')
			},
			
			close() {
			  if (!this.data.active) return
			  this.data.active = false
			  this.$nextTick(() => setTimeout(() => (this.data.display = false), 300))
			},
			
			closePopup() {
			  uni.$emit('popupClose')
			}
		}
	}
</script>

<style lang="scss" scoped>
.the-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 998;
  background: transparent;
  touch-action: none;
  color: var(--theme-text-title-color);

  .the-popup-overlay {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    touch-action: none;
    transition: opacity 0.3s;
  }

  .the-popup-container {
    z-index: 2;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: var(--theme-background-color-card);
    border-radius: 24rpx 24rpx 0 0;
    padding: 15rpx;
    box-sizing: border-box;
    transition: transform 0.3s;
  }
}

.the-popup-active {
  .the-popup-overlay {
    opacity: 1;
  }
  .the-popup-container {
    transform: translate(0, 0);
  }
}

.the-popup-hide {
  .the-popup-overlay {
    opacity: 0;
  }
  .the-popup-container {
    transform: translate(0, 100%);
  }
}
</style>